<template>
	<view class="box">
		<view style="height: 10upx;"></view>
		<navigator url="personal" class="center_top">
			<view class="inner">
				<view class="ct_top">
					<view class="img">
						<image v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill" class="touxiang"></image>
						<image v-else src="../../static/img/indexImg/toux.png" mode="aspectFill" class="touxiang"></image>
					</view>
					<view class="wz">
						<view class="nick_name">
							<view>{{ userInfo.show_name || '--' }}</view> 
						</view>
						<view class="uid">UID: {{ userInfo.id || '--'}}</view>
						<view class="uid" v-if="userInfo.level_name">{{i18n.level}}: {{ userInfo.level_name  || '--' }}</view>
					</view>
				</view>
				<view class="iconfont">&#xe600;</view>
			</view>
		</navigator>
		<view class="ct_link">
	          <navigator class="link" hover-class="none" url="team" >
				  <image src="../../static/img/indexImg/user01.png" class="img" mode="aspectFill"></image>
				  <view class="tit">{{i18n.myTeam}}</view>
				  <view class="iconfont">&#xe600;</view>
			  </navigator>
			  <view class="link" hover-class="none" @click="auth">
				  <image src="../../static/img/indexImg/user02.png" class="img" mode="aspectFill"></image>
				  <view class="tit">{{i18n.auth}}</view>
				  <view class="yrz" v-if="userInfo.authentication == 1">
				  	{{i18n.verified}}
				  </view>
				  <view class="iconfont" v-else>&#xe600;</view>
			  </view>
			  <navigator class="link" hover-class="none" url="safe" >
				  <image src="../../static/img/indexImg/user03.png" class="img" mode="aspectFill"></image>
				  <view class="tit">{{i18n.securityCenter}}</view>
				  <view class="iconfont">&#xe600;</view>
			  </navigator>
			  <navigator class="link" hover-class="none" :url="'share?id='+userInfo.refer_code" >
				  <image src="../../static/img/indexImg/user07.png" class="img" mode="aspectFill"></image>
				  <view class="tit">{{i18n.inviteFriends}}</view>
				  <view class="iconfont">&#xe600;</view>
			  </navigator>
			  <navigator class="link" hover-class="none" url="about" >
				  <image src="../../static/img/indexImg/user04.png" class="img" mode="aspectFill"></image>
				  <view class="tit">{{i18n.about}}</view>
				  <view class="iconfont">&#xe600;</view>
			  </navigator>
			  <navigator class="link" hover-class="none" url="feedback">
				  <image src="../../static/img/indexImg/user05.png" class="img" mode="aspectFill"></image>
				  <view class="tit">{{i18n.customerService}}</view>
				  <view class="iconfont">&#xe600;</view>
			  </navigator>
			  
			  <navigator class="link last-link" hover-class="none" url="setting">
				  <image src="../../static/img/indexImg/user06.png" class="img" mode="aspectFill"></image>
				  <view class="tit">{{i18n.setting}}</view>
				  <view class="iconfont">&#xe600;</view>
			  </navigator>
		</view>
	</view>
</template>

<script>
	import { domain, domain2 } from '@/config.js';
	export default {
		data() {
			return {
				userInfo: {}
			};
		},
		onShow() {
			this.$setTabBarLang()
			this.fetchUserInfo();
			uni.setNavigationBarTitle({
			 title: this.$t('user.my')
			})
		},
		onHide() {

		},
		computed:{
			i18n() {
				return this.$t('user');
			}	
		},
		methods: {
			fetchUserInfo(){
				this.userInfo = this.$getStore('ucenterInfo',true)
				this.$post('api/ucenter/info')
				.then(res => {
					this.userInfo = res.data
					this.$setStore('ucenterInfo', res.data, true)
				})
			},
			bindKey(index) {
				return 10 - index
			},
			auth(){
				if(this.userInfo.authentication !== 1){
					uni.navigateTo({
						url:'auth'
					})
				}
			}
			
		}
	};
</script>

<style lang="less" scoped>
	.box {
		min-height: 100vh;
		background-color: #f5f5f5;
		font-size: 28upx;
	}
	.inner{
		margin:0 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 30upx;
		border-radius: 10upx;
		.iconfont{
			font-size: 28upx;
			color: var(--txt-gray-color);
		}
		.ct_top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.img{
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 30upx;
				.touxiang{
					width: 120upx;
					height: 120upx;
				}
			}
			.wz{
				.nick_name{
					font-size: 36upx;
					display: flex;
					align-items: center;
					view{
						max-width: 300upx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
		.uid{
			font-size: 24upx;
			color: var(--txt-gray-color);
			margin-top: 10upx;
		}
	}
	.ct_link{
		margin: 30upx;
		padding: 0 36upx;
		border-radius: 10upx;
		background-color: #ffffff;
		.link{
			display: flex;
			align-items: center;
			text-align: center;
			padding: 30upx 0;
			border-bottom: 1upx solid var(--border);
			.img{
				width: 36upx;
				height: 36upx;
			}
			.tit{
				flex: 1;
				text-align: left;
				margin: 0 30upx;
				font-size: 28upx;
			}
			.iconfont{
				font-size: 24upx;
				color: var(--txt-gray-color);
			}
		}
		.last-link{
			border: none;
		}
	}
    .yrz{
		font-size: 24upx;
		color: var(--theme-color);
	} 

	
</style>
